<template>
	<view class="order  xbs">
		<view class="top xflex-x-between ">
			<view class="xflex-x">
				<image class="xz" src="/static/image/mine/hi.png" mode=""></image>
				<view class="sn">
					<!-- 订单{{info.sn}} -->
					嗨，有酒店抢单了
				</view>
			</view>
			<view class="xcf state" @click="upload()">
				刷新
			</view>
		</view>

		<view class="xp24-32" style="padding-top: 0;">
			<view class="xflex-x-between xmt32">
				<view class="xflex-x">
					<image class="addicon" src="/static/image/mine/address.png" mode=""></image>
					<view class="addname">
						{{info.keyword}}
					</view>

				</view>
				<view class="xflex-x-center">
					<!-- <view class="addxg">
						修改订单
					</view>
					<image class="jt" src="/static/image/mine/jt.png" mode=""></image> -->
				</view>
			</view>


			<view class="xmt20">
				<view class="timew">
					{{info.order_info.time || ''}}<span class="xml32">{{info.order_info.night}}晚</span>
				</view>
				<view class="info ">
					{{info.order_info.house}}间 · {{info.order_info.adult}}成人 · {{info.order_info.children}}儿童
				</view>
			</view>


			<view class="he"></view>


			<view class="hote">
				<view class="hote-item xflex-x xpt24 xpb24" v-for="(itm,indx) in info.match.hotels" :key="indx">
					<view class="hote-imgs pr xmr12">

						<image class="hote-img pa " :src="itm.hotel.image" mode=""></image>
						<view class="hote-time pa">
							{{itm.seconds}}秒
						</view>

					</view>
					<view class="xflex1">
						<view class="hote-title">
							{{itm.hotel.name}}
						</view>
						<view class="xmt12">
							<image v-for="(item,index) in itm.hotel.star" :key="index" class="xing"
								src="/static/image/mine/xing.png" mode=""></image>
						</view>

						<view class="xflex-x xmt12">
							<view class="hote-span xmr10">
								{{itm.hotel.score}}
							</view>
							<view class="hote-span xmr10" v-if="itm.hotel.sales>0">
								{{itm.hotel.sales>99?'99+':itm.hotel.sales}}已消费
							</view>


						</view>

						<view class="xflex-x">
							<view class="hote-breakfast xflex-x" style="justify-content: flex-end;">
								
								<view class="hote-span1" v-for="(items,index) in itm.house.label" :key="index">{{items}}
								</view>

							</view>
						</view>


						<view class="xflex-x-between">
							<view class="xflex-x">
								<image class="hote-address" src="../../../static/image/mine/address.png" mode="">
								</image>
								<view class="hote-breakfast">
									{{itm.distance}}
								</view>
							</view>
							<view class="hote-ads" @click="topage('/pages/mine/information/information?id='+itm.id+'&name='+itm.hotel.name)">
								查看酒店>
							</view>
						</view>
					</view>
				</view>
			</view>



			<view class="">
				<view class="xflex-x">
					<image class="icon" src="/static/image/mine/sj.png" mode=""></image>
					<view class="time">
						盲盒浏览时间剩余：
					</view>

					<view class="time">
						{{times}}
					</view>
				</view>

				<view class="xflex-x-between xmt32">
					<view class="cancel" @click=" infow.show = true">
						取消订单
					</view>
					<view class="publish" @click="sjkq()">
						随机开启
					</view>
				</view>
			</view>

		</view>

		<u-popup :show="infow.show" :round="24" mode="center" @close="close" @open="open">
			<view class="pop xflex-y-between xai">

				<image class="gb pa" src="/static/image/mine/pgb.png" @click="infow.show = false" mode=""></image>
				<view class="">
					<view class="pop-title">
						是否确认取消订单？？
					</view>

					<view class="pop-content">
						<u-parse :content="infow.popcontent"></u-parse>

					</view>
				</view>

				<view class="xflex-x-between">
					<view class="pop-cancel1" @click="cancel()">
						取消
					</view>


				</view>
			</view>
		</u-popup>

	</view>
</template>

<script setup>
	import {
		hotelcancel,
		hotelpublish,
		indexcontent
	} from "/network/home.js"
	import {
		defineProps,
		defineEmits,
		watchEffect,
		ref,
		onMounted,
		onUnmounted,
		reactive,
	} from 'vue'

	import toast from "../../../../uni_modules/uview-plus/libs/config/props/toast";
	let props = defineProps(['info'])

	let emit = defineEmits(['updata', 'remove', 'del'])
	
	const upload = () =>{
		emit('updata')
	}
	const topage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	let infow = reactive({
		show: false,
		popcontent: ''
	})

	indexcontent({
		name: "order_cancel_tip"
	}).then(res => {
		infow.popcontent = res.data

	})


	// 随机开启
	const sjkq = () => {
		console.log(props.info.match.hotels.length);

		let nux = Math.floor(Math.random() * (props.info.match.hotels.length - 0))
		console.log(props.info.match.hotels, nux);
		uni.redirectTo({
			url: '/pages/mine/information/information?id=' + props.info.match.hotels[nux].id +"&name="+props.info.match.hotels[nux].hotel.name
		})
	}



	const timerId = ref(null);
	let time = ref(0)
	let times = ref('00:00')


	function secondsToMinutes() {
		let minutes = Math.floor(time.value / 60); // 分钟
		let remainingSeconds = time.value % 60; // 剩余秒数
		return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; // 格式化输出
	}
	// 清除定时器的函数
	const clearTimer = () => {
		if (timerId.value) {
			clearInterval(timerId.value);
			timerId.value = null;
		}
	};

	let timeArr = ref([])

	const startTimers = () => {
		// 假设我们每秒钟更新一次数据  
		time.value = time.value - 1
		if (time.value == 1) {
			clearTimer()
			emit('del')
		
		
			return
		} else {
			times.value = secondsToMinutes(time.value)
			setTimeout(()=>{
				startTimers()
			},1000)
		}
		// timeArr.value.push(timesa)

	};
	watchEffect(() => {

		time.value = props.info.match.seconds
		// startTimers()
	})
	
	startTimers()



	// 在组件挂载时启动定时器

	// 在组件卸载时清除定时器  
	
	onUnmounted(() => {
		clearTimer()
		timeArr.value.forEach(timesa => {
			clearInterval(timesa);
		});
		timeArr.value = []
	})
	// 清除所有定时器
	let allClear = () => {
		props.info.match.hotels.forEach((item, index) => {
			// startTimer(item, index)
			if (props.info.match.hotels[index].intervalId) {
				clearTimer(props.info.match.hotels[index].intervalId)
				props.info.match.hotels[index].intervalId == null
			}


		})
	}
	// 启动定时器的函数
	const startTimer = (data, index) => {
		// 假设我们每秒钟更新一次数据  
		props.info.match.hotels[index].intervalId = setInterval(() => {
			// console.log(data);
			if (data.seconds === 0) {
				clearInterval(data.intervalId);
				console.log('订单已结束');

				// 通知父组件移除
				emit('remove', index)

			} else {
				data.seconds = data.seconds - 1
			}

		}, 1000);
	};

	watchEffect(() => {

		props.info.match.hotels.forEach(item => clearInterval(item.intervalId))
		props.info.match.hotels.forEach((item, index) => {

			startTimer(item, index)
		})
	})





	const cancel = () => {
		console.log(props.info);
		if (!props.info.id) return
		hotelcancel({
			id: props.info.id
		}).then(res => {
			infow.show = false
			uni.showToast({
				icon: "none",
				title: '取消成功'
			})
			emit('updata')
		})
	}
</script>

<style lang="scss" scoped>
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}

	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.top {
		padding: 24rpx 29rpx 30rpx;
		// box-sizing: border-box;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #fff;
	}

	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #fff;

		width: 80rpx;
		height: 36rpx;
		background: #F5F5F530;
		border-radius: 6rpx;

		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #F5F5F5;
		line-height: 36rpx;
		text-align: center;

	}

	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}

	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}

	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.timew {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;

	}

	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}

	.xing {
		width: 28rpx;
		height: 28rpx;
	}

	.star {

		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}

	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.he {
		width: 660rpx;
		height: 10rpx;
		background: #F8F8F8;
		margin-top: 30rpx;
	}

	.hote {

		&-title {
			// width: 157rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
		}

		&-span1 {
			padding: 0 10rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 16rpx;
				display: block;
				width: 1rpx;
				height: 20rpx;
				background-color: #999;
			}

			&:last-child {
				&::after {
					width: 0;
					display: none;
				}
			}
		}

		&-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #198EFF;
		}

		&-imgs {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		&-time {
			width: 180rpx;
			height: 40rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			bottom: 8rpx;
			left: 10rpx;
		}

		&-span {

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
			background: #EEEEEE;
			border-radius: 6rpx;
			padding: 7rpx 13rpx;
		}

		&-breakfast {
			width: 100%;
			text-align: right;

			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 48rpx;
		}

		&-address {
			width: 28rpx;
			height: 28rpx;
		}

		&-ads {

			font-weight: 500;
			font-size: 24rpx;
			color: #198FFF;
		}
	}

	.icon {
		width: 25rpx;
		height: 25rpx;
	}

	.time {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #198FFF;
	}

	.pop {
		width: 600rpx;
		// height: 590rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 0rpx;
		box-sizing: border-box;

		.gb {
			width: 40rpx;
			height: 40rpx;
			right: 20rpx;
			top: 20rpx;
		}

		&-title {
			text-align: center;

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
		}

		&-content {

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;

			margin-top: 33rpx;
			min-height: 400rpx;

		}

		&-cancel1 {
			width: 440rpx;
			height: 88rpx;
			border-radius: 44rpx;
			// border: 2px solid #999999;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin: auto;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #fff;
			line-height: 88rpx;
			text-align: center;

		}

		&-ensure {
			width: 300rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>